<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane
        :label="item.name"
        :name="'first' + index"
        v-for="(item, index) in total.bumen"
        :key="index"
      >
        <Row :gutter="24">
          <div class="ivu-mb fx-r" style="width: 98%">
            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>机关事业单位</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/merchants/index?type_name=机关事业单位&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.jiguan_count || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>
            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>餐饮有限公司</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/merchants/index?type_name=餐饮有限公司&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div>
                  <div class="fx-r fx-bc" style="font-size: 24px">
                    {{ item.catering_count || '0' }}
                    <div class="fx-g1"></div>
                    <Tag slot="extra" color="green">家</Tag>
                  </div>
                </div>
              </router-link>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>企业食堂</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/merchants/index?type_name=企业食堂&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.qyst_count || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>
            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>文化礼堂</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/merchants/index?type_name=文化礼堂&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.wh_count || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>个体工商户</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/merchants/index?type_name=个体工商户&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.gt_count || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>其他</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/merchants/index?type_name=其他&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.othen_count || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>未分类</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/merchants/index?type_name=未分类&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.wfl_count || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>
            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>总数</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/merchants/index?type_name=总数&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.all_count || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>
          </div>
        </Row>
        <Row :gutter="24">
          <div class="ivu-mb fx-r" style="width: 98%">
            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>定期清洗</span>
              </p>

              <div>
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.dq || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </div>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>定期清洗率</span>
              </p>
              <div class="fx-r fx-bc" style="font-size: 24px">
                {{ item.dq_lv || '0' }}%
                <div class="fx-g1"></div>
                <Tag slot="extra" color="green">百分比</Tag>
              </div>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>超期</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/project/cq?type_name=超期&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.cq || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>超期率</span>
              </p>
              <div class="fx-r fx-bc" style="font-size: 24px">
                {{ item.cq_lv || '0' }}%
                <div class="fx-g1"></div>
                <Tag slot="extra" color="green">百分比</Tag>
              </div>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>待核查</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/project/index?no_zhipai=0&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.smhc || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>要求整改</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/project/cq?zhip=要求整改&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.zgai || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>整改中</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/project/cq?zhip=完成指派&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.yqzg || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>

            <Card
              :bordered="false"
              class="iicard-v1"
              dis-hover
              :padding="12"
              style="margin-bottom: 20px"
            >
              <p slot="title">
                <span>超时未整改</span>
              </p>
              <router-link
                :to="{
                  path:
                    '/system/project/cq?zhip=未完成指派&bumen_id=' +
                    item.bumen_id,
                }"
              >
                <div class="fx-r fx-bc" style="font-size: 24px">
                  {{ item.all_product || '0' }}
                  <div class="fx-g1"></div>
                  <Tag slot="extra" color="green">家</Tag>
                </div>
              </router-link>
            </Card>
          </div>
        </Row>
      </el-tab-pane>
    </el-tabs>

    <el-divider />
    <div class="fx-r fx-bc fx-ac">
      <el-button @click="tapOutXls">导出数据库统计</el-button>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { SystemIndex, SystemIndexOut } from '../../../api/system'
export default {
  name: 'index',
  computed: {},
  data() {
    return {
      grid: {
        xl: 4,
        lg: 10,
        md: 10,
        sm: 12,
        xs: 12,
      },
      activeName: 'first0',
      visitDate: 'thirtyday',
      total: {
        datail: {},
        integral: {},
        brokerage: {},
        anticipate: {},
        bumen: [],
      },
      orderTotal: [],
      txTotal: { name: [] },
      siteList: [],
      page: {
        loading: true,
        pageCount: 0, // 一共多少数量
        pageSize: 0, // 每一页码数量
        page: 1, // 当前页码
      },
      payEcharts: null,
      txEcharts: null,
    }
  },

  created() {
    this.initView()
  },
  methods: {
    initView: function () {
      let loading = this.$loading('加载数据中..')
      SystemIndex()
        .then((res) => {
          loading.close()
          if (res.code == 200) {
            this.total = res.data
          }
        })
        .catch((err) => {
          console.log(err)
          loading.close()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })

      return
    },

    // 时间改变
    handleChangeVisitType() {
      var data = {}
      data.visitDate = this.visitDate
      SystemIndexOrderTotal(data)
        .then((res) => {
          if (res.code == 200) {
            this.orderTotal = res.data
            this.initEcharts()
          }
        })
        .catch((err) => {
          console.log(err)
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })

      SystemIndexTxTotal(data)
        .then((res) => {
          if (res.code == 200) {
            this.txTotal = res.data
            this.initTxEcharts()
          }
        })
        .catch((err) => {
          console.log(err)
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    },

    initEcharts: function () {
      var option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.orderTotal.name,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        legend: {
          data: ['子订单量', '订单金额'],
        },
        series: [
          {
            name: '子订单量',
            type: 'bar',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#6fdeab' },
                    {
                      offset: 0.5,
                      color: '#44d693',
                    },
                    { offset: 1, color: '#2cc981' },
                  ],
                },
              },
            },
            data: this.orderTotal.order_count,
          },
          {
            name: '订单金额',
            type: 'bar',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#2d8cf0' },
                    {
                      offset: 0.5,
                      color: '#2d8cf0',
                    },
                    { offset: 1, color: '#2d8cf0' },
                  ],
                },
              },
            },
            data: this.orderTotal.order_info_count,
          },
        ],
      }
      this.myChart.setOption(option, true)
    },

    initPayEcharts: function () {
      var option2 = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.payTotal.name,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        legend: {
          data: ['支付金额'],
        },
        series: [
          {
            name: '支付金额',
            type: 'bar',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#6fdeab' },
                    {
                      offset: 0.5,
                      color: '#44d693',
                    },
                    { offset: 1, color: '#2cc981' },
                  ],
                },
              },
            },
            data: this.payTotal.money,
          },
        ],
      }

      this.payEcharts.setOption(option2, true)
    },
    initTxEcharts: function () {
      var option2 = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: this.txTotal.name,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        legend: {
          data: ['提现金额'],
        },
        series: [
          {
            name: '提现金额',
            type: 'bar',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: '#3398DB' },
                    {
                      offset: 0.5,
                      color: '#3398DB',
                    },
                    { offset: 1, color: '#3398DB' },
                  ],
                },
              },
            },
            data: this.txTotal.money,
          },
        ],
      }
      this.txEcharts.setOption(option2, true)
    },

    tapOutXls: function () {
      SystemIndexOut().then((res) => {
        if (res.code == 200) {
          location.href = res.data.url
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
.dashboard-console-grid {
  text-align: center;
  .ivu-card-body {
    padding: 0;
  }
  i {
    font-size: 32px;
  }
  a {
    display: block;
    color: inherit;
    padding: 16px;
  }
  p {
    margin-top: 8px;
  }
}
.ivu-mb {
  margin-bottom: 10px;
}
.iicard-v1 {
  width: 24%;
  margin-right: 10px;
}

.bbitems {
  .item {
    margin-right: 10px;
    margin-bottom: 10px;
    .label {
      margin-right: 6px;
    }
    .value {
      font-size: 14px;
      font-weight: bold;
      color: #e6a23c;
    }
  }
}
</style>
